<template>
	<div class="register">
	  <div class="mui-content">
	    <form class="mui-input-group">
	      <div class="mui-input-row">
	        <label>账号</label>
	        <input
	          v-model="regForm.username"
	          id="account"
	          type="text"
	          class="mui-input-clear mui-input"
	          placeholder="请输入账号"
	        />
	      </div>
	      <div class="mui-input-row">
	        <label>密码</label>
	        <input
	          v-model="regForm.password"
	          id="password"
	          type="password"
	          class="mui-input-clear mui-input"
	          placeholder="请输入密码"
	        />
	      </div>
		  <div class="mui-input-row">
		    <label>密码</label>
		    <input
		      v-model="regForm.repassword"
		      id="password"
		      type="password"
		      class="mui-input-clear mui-input"
		      placeholder="请确认密码"
		    />
		  </div>
		  <div class="mui-input-row">
		    <label>邮箱</label>
		    <input
		      v-model="regForm.email"
		      id="text"
		      type="text"
		      class="mui-input-clear mui-input"
		      placeholder="请输入邮箱"
		    />
		  </div>
	    </form>
	
	    <div class="mui-content-padded">
	      <button
	        @click="reg"
	        type="button"
	        class="mui-btn mui-btn-block mui-btn-primary"
	      >
	        注册
	      </button>
	      <div class="link-area">
			  <p>注册成功后的用户可用于登录</p>
		  </div>
	    </div>
	    <div class="mui-content-padded oauth-area"></div>
	  </div>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				regForm: {
					username: '',
					password: '',
					repassword: '',
					email: ''
				}
			}
		},
		methods:{
			reg(){
				//1.判断用户是否已经输入账号，密码，重复密码，邮箱
				if(this.regForm.username === ''){
					this.$toast('账号不能为空')
					return
				}
				if(this.regForm.password === ''){
					this.$toast('密码不能为空')
					return
				}
				if(this.regForm.repassword === ''){
					this.$toast('确认密码不能为空')
					return
				}
				if(this.regForm.email === ''){
					this.$toast('邮箱不能为空')
					return
				}
				//2.判断用户两次输入的密码是否一致
				if(this.regForm.password !== this.regForm.repassword){
					this.$toast('两次密码输入必须一致')
					return
				}
				//3.发送请求给后台接口完成注册操作
				// console.log('验证成功')
				this.$http.post('register',this.regForm).then(res =>{
					if(res.data.code === 0){
						this.$toast(res.data.msg)
					}else{
						//注册成功，立即登录
						//3.1将注册的用户信息保存到vuex
						this.$store.commit("addUser",res.data.data)
						//3.2将注册的用户的session_id保存的localStorage
						this.$auth.setAuthorization(res.data.data.session_id)
						//3.4 弹窗提示用户注册成功
						this.$toast(res.data.msg)			
						//3.4完成注册之后跳转到 我的 页面（/user）
						this.$router.push('/user')
					}
				}).catch(()=>{
					this.$toast('注册失败')
				})
			}
		}
	}
</script>

<style>
</style>
